<template>
  <div class="import-container">
	<div class="import-container-wrapper">
		<div class="i-left">
			<el-upload
				ref="upload"
			    accept=".csv"
			    :headers="upload.headers"
			    :action="upload.url"
				:disabled="upload.isUploading"
				:on-progress="handleFileUploadProgress"
				:before-upload="handleFileBeforeUpload"
			    :on-success="handleFileSuccess"
				:on-error="handleFileUploadError"
			>
				<el-button type="success" class="importBtn" :loading="upload.isUploading" >
					{{upload.isUploading?'正在导入中，请稍后':'导入License清单'}}
				</el-button>
			</el-upload>
			
			<el-table
			  :data="list"
			  v-loading="loading"
			 >
			  <el-table-column
				label="序号"
				type="index"
				width="60">
			  </el-table-column>
			  <el-table-column
				prop="sn"
				label="SN"
				show-overflow-tooltip
				min-width="80">
			  </el-table-column>
			  <el-table-column
				prop="uid"
				label="UID"
				show-overflow-tooltip
				min-width="140">
			  </el-table-column>
			  <el-table-column
				prop="status"
				label="状态"
				min-width="60">
			  </el-table-column>
			  <el-table-column
				label="生成日期"
				show-overflow-tooltip
				min-width="85">
				<template slot-scope="scope">
					{{scope.row.createTime | formatDate}}
				 </template>
			  </el-table-column>
			  <el-table-column
				show-overflow-tooltip
				label="出货日期"
				min-width="85">
				<template slot-scope="scope">
					{{scope.row.shippingDate | formatDate}}
				 </template>
			  </el-table-column>
			  <el-table-column
				prop="saleMan"
				label="销售人员"
				show-overflow-tooltip
				min-width="80">
			  </el-table-column>
			  <el-table-column
				show-overflow-tooltip
				label="使用日期"
				min-width="85">
				<template slot-scope="scope">
					{{scope.row.userTime | formatDate}}
				 </template>
			  </el-table-column>
			  <el-table-column
				prop="customer"
				label="客户编码"
				show-overflow-tooltip
				min-width="80">
			  </el-table-column>
			  <el-table-column
				prop="user"
				label="使用人"
				show-overflow-tooltip
				min-width="90">
			  </el-table-column>
			</el-table>
			<div class="pagination">
				<pagination
				  v-show="total>0"
				  :total="total"
				  :page.sync="queryParams.pageNum"
				  :limit.sync="queryParams.pageSize"
				  @pagination="getList"
				/>
			</div>
		</div>
		<div class="i-right">
			<div class="i-r-top">
				<div class="title">
					License总数
				</div>
				<div class="count">
					{{license_num.total}}
				</div>
				<div class="statistics">
					<div class="left">
						有效数量：{{license_num.available}}
					</div>
					<div class="right">
						无效数量：{{license_num.invalid}}
					</div>
				</div>
			</div>
			<div class="i-r-bottom">
				<div class="title">
					导入记录
				</div>
				 <el-table
				    ref="singleTable"
				    :data="importRecord"
				    highlight-current-row
				    style="width: 100%;margin-top: 20px;">
				    <el-table-column
					  show-overflow-tooltip
				      property="filename"
				      label="名称"
				      width="120">
				    </el-table-column>
				    <el-table-column
				      property="record"
				      label="导入数量"
				      width="80">
				    </el-table-column>
					<el-table-column
					  show-overflow-tooltip
					  property="reportTime"
					  label="导入时间"
					  width="100">
					</el-table-column>
				  </el-table>
			</div>
		</div>
	</div>	
    
  </div>
</template>

<script>
import { licenseList, licenseRecordList} from '@/api/import'
import { getToken } from "@/utils/auth";
import { mapGetters } from 'vuex';
export default {
	computed: {
	  ...mapGetters(['license_num'])
	},
  data() {
    return {
		// 遮罩层
		loading: false,
		//全屏遮罩层
		fullscreenLoading: true,
		upload: {
		  // 是否禁用上传
		  isUploading: false,
		  // 设置上传的请求头部
		  headers: { Authorization: "Bearer " + getToken() },
		  // 上传的地址
		  url: process.env.VUE_APP_BASE_API + "/licensekey/licensekey/csvImport"
		},
		list: [
		  /* {
			sn:'xxx01',
			uid:'HICHS 0001-PX041',
			status:"有效",
			creationDate: '20160502',
			dispatchDate: '20160502',
			name: '张三',
			usedDate:'20160502',
			client: '客户A',
			user:'生产人员A'
		  },{
			sn:'xxx01',
			uid:'HICHS 0001-PX041',
			status:"有效",
			creationDate: '20160502',
			dispatchDate: '20160502',
			name: '张三',
			usedDate:'20160502',
			client: '客户A',
			user:'生产人员A'
		  }, */
		],
		// 总条数
		total: 0,
		// 查询参数
		queryParams: {
		  pageNum: 1,
		  pageSize: 10,
		},
		
		/* lincenseStatistics:{
		  total:10, 		//License总数
		  available:10,		//License有效数量
		  invalid:0			//License无效数
		}, */
	  
	  importRecord: [
	  /* {
		name: '腾讯算法lincense',
		num: '19',
		date: '2016-05-02 12:41:05'
	  }, {
		name: '测试数据',
		num: '2772',
		date: '2016-05-04 12:41:05'
	  } */
	  ],
    }
  },
  created() {
    this.getList()
	this.getRecordList();
	this.handleGetTotalKey()
  },
  methods: {
	  //文件上传前
	handleFileBeforeUpload() {
		this.fullscreenLoading = this.$loading({
		  lock: true,
		  text: '文件正在解析中，请稍等！',
		  spinner: 'el-icon-loading',
		  background: 'rgba(0, 0, 0, 0.7)'
		});
		// this.fullscreenLoading = true;
	},
	//获取license列表
	getList(){
	  	this.loading = true;
	  	licenseList(this.queryParams).then(response => {
	  	    this.list = response.rows;
	  	    this.total = response.total;
	  	    this.loading = false;
	  	  }
	  	)
	},
	//获取导入license列表记录
	getRecordList(){
	  	licenseRecordList({type:1}).then(response => {
	  	    this.importRecord = response.rows.slice(0,10)
	  	  }
	  	)
	},
	//获取license统计数据
	async handleGetTotalKey() {
	  const roles = await this.$store.state.user.roles[0]
	  this.$store.dispatch('common/getLicense',roles).then(() => {
	  }).catch(() => {
		  console.log("出错");
	  })
	},
	
	// 文件上传中处理
	handleFileUploadProgress(event, file, fileList) {
	    this.upload.isUploading = true;
	},
	// 文件上传成功处理
	handleFileSuccess(response, file, fileList) {
		let asc = this.fullscreenLoading;
		this.fullscreenLoading.close();
		this.upload.isUploading = false;
		this.$refs.upload.clearFiles();
		this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
		this.getRecordList()
		this.getList();
		this.handleGetTotalKey();
	},
	//文件上传失败处理
	handleFileUploadError(){
		this.upload.isUploading = false;
		this.getRecordList()
	}
	
  }
}
</script>
<style lang="scss" scoped>
	.import{
		&-container{
			
			&-wrapper{
				display: flex;
				justify-content: space-between;
				.i-left{
					margin-right: 20px;
					width: 100%;
					background-color: #fff;
					padding: 20px;
					box-shadow: 0 2px 10px 5px #eee;
					border-radius: 8px;
					.importBtn{
						margin-bottom: 20px;
					}
				}
				.i-right{
					width: 500px;
					.i-r-top{
						background-color: #fff;
						margin-bottom: 20px;
						padding: 20px;
						box-shadow: 0 2px 10px 5px #eee;
						border-radius: 8px;
						.title{
							font-style: 14px;
							color: #333;
						}
						.count{
							font-size: 40px;
							text-align: center;
							padding: 15px 0 30px 0;
							
							
						}
						.statistics{
							display: flex;
							justify-content: center;
							font-size: 12px;
							.left{
								color: #1CA450;
								width: 120px;
								text-align: center;
							}
							.right: {
								color: #7E8590;
								width: 100px;
								text-align: center;
							};
						}
					}
					.i-r-bottom{
						border-radius: 8px;
						background-color: #fff;
						box-shadow: 0 2px 10px 5px #eee;
						padding: 20px;
						.title{
							font-style: 14px;
							color: #333;
						}
					}
				}
			}
		}
		
	}
</style>
